<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报告管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
{#    <link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css" />#}
    <style>
        body { font-family: Arial, sans-serif; background-color: #f4f4f4;}
        .container { width: 96%; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer;align-items: center; justify-content: center;  }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        /* 新增样式：为 report-manage 设置左边预留 50px 的宽度 */
        #report-manage {
            {#width: 90%;#}
            padding: 32px;
            margin-top: 16px;
            {#margin: 20px;#}
            margin-left: 24px; /* 左边预留 50px 的宽度 */
            margin-right: 24px; /* 左边预留 50px 的宽度 */
            background-color: white;
            border-radius: 12px;
        }

    </style>
</head>
<body>
    <form action="/export_selected_report" method="POST" id="reportForm">
    <div class="layui-form" id="report-manage">
        <div class="layui-row">
            <div class="layui-col-xs6" >
                <h3>选择要导出的报告<br></h3>
                <hr class="layui-border-green" width="60%" align="left">
                <div class="form-group">
                <!-- 添加的多选框 -->
                    <br>
                    <input type="checkbox" name="tara_excel"  title="01 网络安全威胁分析与风险评估(TARA)表" checked><br><br>
                    <input type="checkbox" name="tara_word"   title="02 网络安全威胁分析与风险评估(TARA)报告"><br><br>

                    <input type="checkbox" name="reqs_vendor" title="03 零部件安全需求分配表 "><br><br>
                    <input type="checkbox" name="reqs_all"    title="04 整车级安全需求分配表 "><br><br>
                    <input type="checkbox" name="reqs_word"   title="05 整车网络安全需求规范 "><br>

                    <br>
                </div>
                    <button type="submit" class="layui-btn" id="exportSelectedReport">
                    <i class="layui-icon" style="font-size: 16px; color: whitesmoke;">&#xe67d;</i> 导出报告</button>
                <button type="button" class="layui-btn layui-btn-primary" id="clearAllReport">
                    <i class="layui-icon" style="font-size: 16px; color: black;">&#xe640;</i> 清空目录</button>
            </div>
            <div class="layui-col-xs6" >
                <div id="exportedFiles" style="margin-top: 1px;">
                    <!-- 导出的文件列表将显示在这里 -->
                </div>
            </div>
         </div>
    </div>
    </form>

    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'jquery'], function() {
            var layer = layui.layer;
            var $ = layui.jquery;

            $('#reportForm').submit(function(event) {
                var checkedTitles = [];
                // 获取所有 checkbox 元素
                $('input[type="checkbox"]').each(function() {
                    if ($(this).is(':checked')) {
                        // 获取选中的 checkbox 的 title
                        checkedTitles.push($(this).attr('title'));
                    }
                });
                event.preventDefault(); // 阻止默认提交行为
                // 弹出消息显示所有选中的 title
                if (checkedTitles.length > 0) {
                    layer.msg('开始生成如下报告：<br>' + checkedTitles.join(',<br> '), {icon: 1});
                    layer.load(2, {
                        shade: [0.3, '#000'] // 设置遮罩层的透明度和颜色
                    });

                    $.ajax({
                    url: '/export_selected_report',
                    type: 'POST',
                    data: $(this).serialize(), // 序列化 Form 数据
                    success: function(response) {
                        layer.closeAll('loading');

                        if (response.success) {
                            layer.msg('选中的报告已成功导出', {icon: 1});
                             listExportedFiles(); // 刷新文件列表
                            $('#exportedFiles').css('display', 'block').css('display', '');

                        } else {
                            layer.msg('导出失败，请稍后再试。', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('请求失败，请稍后再试。', {icon: 2});
                    }
                });
                } else {
                    layer.msg('请先选择要导出的报告', {icon: 2});
                }
            });

            $('#clearAllReport').click(function() {
                $.ajax({
                    url: '/clearAllFiles',
                    type: 'POST',
                    success: function(response) {
                        if (response.success) {
                            layer.msg('所有文件已成功删除！', {icon: 1});
                            listExportedFiles(); // 刷新文件列表
                        } else {
                            layer.msg('文件删除失败，请稍后再试。', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('请求失败，请稍后再试。', {icon: 2});
                    }
                });
            });

            function listExportedFiles() {
                $.ajax({
                    url: '/listExportedFiles',
                    type: 'GET',
                    success: function(response) {
                        var files = response.files;
                        var html = '<h3>导出的报告列表</h3><hr class="layui-border-blue" width="60%" align="left"><ul>';
                        files.forEach(function(file) {
                            html += `<li><a href="/download/${file}" download>${file}</a></li>`;
                        });
                        html += '</ul>';
                        $('#exportedFiles').html(html);
                    },
                    error: function() {
                        layer.msg('获取导出文件列表失败，请稍后再试。', {icon: 2});
                    }
                });
            }

            // 页面加载时列出已导出的文件
            listExportedFiles();
        });
    </script>
</body>
</html>